<template>
  <div class="login-container">
    <!-- 公共头部 -->
    <div class="common-header">
      <div class="common-header-wrapper-1200">
        <a> <img src="@/assets/logo/logo3.png" /></a>
      </div>
    </div>
    <div class="addForm-container">
      <!-- 已有账号？立即登录 -->
      <div class="btn-bottom">
        <p>
          已有账号？<el-button type="text" @click="toLogin">立即登录</el-button>
        </p>
      </div>

      <!-- 注册区域 -->
      <div class="addForm-area">

        <div class="register-area-steps">
          <el-steps :active="activeIndex * 1" finish-status="success" align-center>
            <el-step title="第一步：验证码认证"> </el-step>
            <el-step title="第二步：密码修改"></el-step>
          </el-steps>
        </div>

        <el-form class="addForm-areaForm" :model="addForm" :rules="addFormRules" ref="addFormRef" label-position="right" label-width="50px">
          <el-tabs v-model="activeIndex" :tab-position="'left'" :before-leave="beforeTabLeave" @tab-click="tabClickindex">
            <el-tab-pane label="验证码认证" name="0">

              <!-- 验证码认证  -->

              <el-form-item class="tabSelect">
                <span :class="tabSelectIndex==1?'select tabSelectItem':'tabSelectItem'" @click="tabSelect(1)">邮箱</span>
                <span :class="tabSelectIndex==2?'select tabSelectItem':'tabSelectItem'" @click="tabSelect(2)">手机号</span>
              </el-form-item>

              <el-form-item label="" prop="email" v-show="tabSelectIndex==1">
                <el-input v-model="addForm.email" type="text" auto-complete="off" placeholder="请输入邮箱">
                  <svg-icon slot="prefix" icon-class="email" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>

              <el-form-item label="" prop="phone" v-show="tabSelectIndex==2">
                <el-input v-model="addForm.phone" type="text" auto-complete="off" placeholder="请输入手机号">
                  <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>

              <el-form-item prop="code" class="code-wrapper">
                <div class="code-item">
                  <el-input v-model="addForm.code" type="text" auto-complete="off" placeholder="验证码">
                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                  </el-input>
                </div>

                <el-button type="button" class="code-btn" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码
                </el-button>
                <el-button type="button" class="code-btn" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                </el-button>
              </el-form-item>

              <el-form-item class="item-btn">
                <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleforgetPassword">
                  <span v-if="!loading">验证</span>
                  <span v-else>验 证 中...</span>
                </el-button>

              </el-form-item>
              <!-- 验证码认证  end -->
            </el-tab-pane>

            <el-tab-pane label="密码修改" name="1">
<el-form-item label="" prop="password">
                <el-input v-model="addForm.username" autocomplete="off" clearable placeholder="请输入用户名">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input v-model="addForm.password" autocomplete="off" clearable placeholder="请输入密码">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="checkPass">
                <el-input v-model="addForm.checkPass" autocomplete="off" clearable placeholder="请再次输入密码">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>

              <!-- 完成提交 -->
              <el-form-item class="item-btn">
                <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="addFormBtn">
                  <span v-if="!loading">提交</span>
                  <span v-else>提 交 中...</span>
                </el-button>

              </el-form-item>
             
              <!-- 完成提交  end -->

              <!-- 密码修改  end -->

            </el-tab-pane>

          </el-tabs>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
// 组件导入
export default {

  data() {
    return {

      //微信返回的 code值
      code: '',

      // 进度条 初始化
      active: 0,

      //选项卡 邮箱 手机号
      tabSelectIndex: '1',



      //步骤条 默认展示 索引
      activeIndex: "0",


      //添加账户的表单数据对象
      addForm: {

        //登录账号
        username:"",
        //邮箱
        email: "",
        //手机号
        phone: "",
        //密码
        password: "",
        //确认密码
        checkPass: "",
        //验证码
        verityNumber: "",
        

      },


      //验证码参数
      disabled: false,
      time: 0,
      btntxt: "重新发送",


      //检验规则
      addFormRules: {

        //	手机号
        phone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "联系方式输入不合法",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "原始密码不能为空", trigger: "blur" },
          {
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/,
            message:
              "至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符",
          },
        ],

        checkPass: [
          { required: true, message: "确定密码不能为空", trigger: "blur" },
          {
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/,
            message:
              "至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符",
          },
        ],
        //验证码
        verityNumber: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ],
      },
    };
  },




  methods: {


    // 登录
    toLogin() {
      this.$router.push("/login");
    },


    //选项卡 邮箱 手机号
    tabSelect(id) {
      //选项卡 邮箱 手机号 
      this.tabSelectIndex = id
    },


    //tab标签 时间
    handleClick(tab) {
      //当前选中的tab index
      console.log("tab标签,index,", tab);
      this.activeIndex = tab;
    },
    //切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。
    //1.activeName    即将跳转的标签页
    //2.oldActiveName 即将离开的标签页
    //3. return false 可以阻止跳转
    beforeTabLeave(activeName, oldActiveName) {
      console.log(
        "即将跳转的标签页",
        activeName,
        "即将离开的标签页",
        oldActiveName
      );

      if (activeName == "0") {

      } else if (activeName == "1") {

        /* 判断有无code值 请先去完成验证码认证 */
        /* if (this.code == '') {
          this.$message.error("请先去完成验证码认证!");
          return false;
        } */

      }

    },
    //tab 被选中时触发  返回 当前激活的tab 页
    tabClickindex() {
      console.log("当前tab页", this.activeIndex);
      if (this.activeIndex === "0") {
      } else if (this.activeIndex === "1") {
      } else if (this.activeIndex === "2") {
        console.log("this.addForm", this.addForm);
      }
    },
    // 注册提交
    addFormBtn() {
      this.$refs.addFormRef.validate(async (valid) => {
        console.log("valid", valid);
        if (!valid) return this.$message.error("信息填写不完善，请先去填写，再来提交!");

        console.log("提交信息", this.addForm);

        if (this.addForm.password != this.addForm.checkPass) {
          return this.$message.error("两次输入密码不一致!");
        }

        //新增
        const { data: res } = await this.$axios.post("/user/regist", {
          ...this.addForm,
        });

        if (res.code !== 200) return this.$message.error(res.msg);

        this.$message({
          message: "注册成功,",
          type: "success",
        });

        this.$router.push("/login");

      });
    },


    //手机验证发送验证码
    async sendcode() {
      const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (this.addForm.phone == '') {
        this.$message({
          message: '手机号不能为空',
          center: true
        })
        return
      }
      if (!reg.test(this.addForm.phone)) {
        this.$message({
          message: '请输入正确的手机号',
          center: true
        })
        return
      } else {
        console.log(this.addForm.phone);

        const { data: res } = await this.$axios.get("/public/user/getVerity", {
          params: {
            phone: this.addForm.phone,
          }
        });

        if (res.code !== 200) return this.$message.error(res.msg);

        console.log("res", res);

        this.$message({
          message: '发送成功',
          type: 'success',
          center: true
        });
        this.time = 60;
        this.disabled = true;
        this.timer();
      }
    },
    //60S倒计时
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },


  }


};
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: #f4f6fa;
}
.addForm-container {
  width: 1200px;
  height: 800px;
  margin: 0 auto;
}
.common-area {
  width: 100%;
  height: calc(100% - 60px);
  background: #f4f6fa;
  padding-top: 60px;
}
.common-header {
  width: 100%;
  background: #fff;
  .common-header-wrapper-1200 {
    width: 1200px;
    margin: 0 auto;
  }
}

/* 已有账号？立即登录 */

/* 还没有账号？免费注册 */
.btn-bottom {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  p {
    font-size: 14px;
    color: #000;
  }
}

.addForm-title {
  padding: 0 10px;
  font-size: 14px;
  color: #606266;
  /* line-height: 40px; */
  /* padding: 0 12px 0 0; */
  margin-bottom: 25px;
  margin-left: 25px;
}

.register-area-steps {
  margin-bottom: 60px;
}

/* 注册区域 */
.addForm-area {
  height: 540px;
  padding: 100px 200px;
  background: #fff;

  /* 手写选项卡 */
  .tabSelect {
    text-align: center;
    .tabSelectItem {
      width: 50%;
      color: #333;
      cursor: pointer;
      font-size: 14px;
      border: 1px solid #dcdfe6;
      display: inline-block;
      height: 36px;
      border-radius: 4px;
    }
    .select {
      color: #1890ff;
      border-color: #1890ff;
    }
  }

  /* 确定 */
  .item-btn{
    width: 100%;
    margin-top: 40px;
  }

  .addForm-area-steps {
    margin: 0 40px 40px;
  }

  .addForm-areaForm {
    margin-right: 50px;
  }
}

.addForm-item {
  text-align: center;
  img {
    display: block;
    margin: 4% auto 0;
    width: 150px;
  }
}

// 验证码
.code {
  .el-input {
    width: 50%;
    border-radius: 0px;
    float: left;
    display: inline-block;
  }
  .el-button {
    width: 50%;
    height: 40px;
    text-align: center;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0px;
    float: left;
    display: inline-block;
  }
}
</style>
